<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css" />
    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/template-native.js"></script>
    <!-- 创建模板 -->
    <script id="tem" type="text/html">
      <!-- 将拿到的数据中 的 comments 变量进行遍历 -->
      <!-- 在每个li标签中添加一个自定义标签属性，记录自己的id -->
      <% for (var i=0 ; i < comments.length ; i++) { %>
      <li uid="<%= comments[i].id %>">
        <p class="floor">
          <%= comments[i].id %>楼<a href="javascript:;" class="delete">删除</a>
        </p>
        <p class="author">
          层主：<span class="name"> <%= comments[i].username %> </span>
        </p>
        <p class="content"><%= comments[i].content %></p>
      </li>
      <% } %>
    </script>
  </head>

  <body>
    <div class="main">
      <div class="post">
        <h2>中秋快乐</h2>
        <p class="author">楼主：曹中义</p>
        <p class="txt">中秋快乐，阖家安康！</p>
      </div>
      <div class="reply">
        <h4>发表回复</h4>
        <p>用户名：<input type="text" class="user" /></p>
        <textarea class="editor"></textarea>
        <input type="button" value="发表" class="btn" />
      </div>
      <div class="cmts">
        <ul class="list"></ul>
      </div>
    </div>
    <script>
      // 获取元素
      var $list = $('.cmts .list')
      var $btn = $('.reply .btn')
      var $user = $('.reply .user')
      var $editor = $('.reply .editor')
      // 获取后台数据
      $.ajax({
        url: 'http://localhost:3000/data',
        type: 'GET',
        success: function (data) {
          // console.log(data)
          // 将得到的数据通过模板添加到页面中
          $list.html(template('tem', data))
          // 在这里可以正常获取所有添加的元素
          // 需要获取 删除按钮，添加点击事件，删除自己所在的 li 标签
          deleteData()
        }
      })

      // 添加一项新的数据到数据库中
      // 添加点击事件
      $btn.click(function () {
        var username = $user.val()
        var content = $editor.val()
        $.ajax({
          url: 'http://localhost:3000/comments',
          type: 'POST',
          dataType: 'json',
          data: { username: username, content: content },
          success: function (data) {
            // console.log(data);
            // 制作一个模板需要的对象数据，将 data 作为数组中的项
            $list.append(template('tem', { comments: [data] }))
            deleteData()
          }
        })
        // 清空输入
        $user.val('')
        $editor.val('')
      })

      // 定义 点击 按钮 删除的函数
      function deleteData() {
        $('.cmts .list .delete').click(function () {
          // 要找到自己的祖先中的li 标签
          $li = $(this).parents('li')
          // 找到 li 标签记录的在数据库中的 id
          var index = $li.attr('uid')
          // 发送请求到数据库，删除对应的数据
          $.ajax({
            url: 'http://localhost:3000/comments/' + index,
            type: 'DELETE'
          })
          // 从 DOM结构中删除对应的 li
          $li.remove()
        })
      }
    </script>
  </body>
</html>
